{{extend './base.html'}}
{{block 'title'}}
文章列表
{{/block}}
{{block 'blog-list-active'}}
active
{{/block}}
{{block 'style'}}
<link rel="stylesheet" href="/css/home.css">
<style>
    #pagination .active a{
        color: #fff !important;
    }
</style>
{{/block}}
{{block 'content'}}
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-lg-10">
            <div class="panel" style="min-height: 800px">
                {{if blogs.length === 0}}
                暂无博客
                {{else}}
                <div class="blog-border">
                    {{each blogs}}
                    <div class="blog-item">
                        <a class="blog-item-left" href="/blog/detail/{{ $value._id.toString() }}">
                            <img src="{{$value.cover}}">
                        </a>
                        <div class="blog-item-right">
                            <div class="blog-title">
                                <a href="/blog/detail/{{ $value._id.toString() }}">{{$value.title}}</a>
                            </div>
                            <div class="blog_descipt">
                                {{$value.content.substring(0,150)}}
                            </div>
                            <div class="blog-tags">
                                <ul>
                                    <li><span class="glyphicon glyphicon-time"></span><span>{{ $value.created_time | dateFormat:'YYYY-MM-DD' }}</span></li>
                                    <li><span class="glyphicon glyphicon-tag"></span><span>{{$value.tag.blog_tag}}</span></li>
                                    <li><span class="glyphicon glyphicon-eye-open"></span><span>{{$value.read_num}}</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                </div>
                {{/if}}
            </div>
        </div>
        {{if blogs.length > 0}}
        <div class="col-xs-12 col-sm-6 col-md-8 col-lg-10" style="text-align: center">
            <div id="pagination" class="pagination"></div>
        </div>
        {{/if}}
    </div>
</div>
{{/block}}
{{block 'js'}}
<script type="text/javascript" src="/js/jq-paginator.min.js"></script>
<script type="text/javascript">
    $('#pagination').jqPaginator({
        totalCounts: {{totalCount}},
        visiblePages: 100,
        currentPage: {{currentPage}},
        pageSize: {{pageSize}},
        onPageChange: function (num, type) {
            if (type === 'change') {
                const href = location.href.split('?');
                window.location.href = href[0]+`?page=${num}`
            }
        }
    });
</script>
{{/block}}
